/**
 * Created by user on 2018/5/21.
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import MaterialSwiper from './materialSwiper'
import MaterialVideo from './materialVideo'

import MaterialController from '../../../utils/MaterialController'
import MaterialPlayer from '../../../utils/MaterialPlayer'
import { Type } from '../../../utils/Global'
import MaterialVideoPlayer from '../../../utils/MaterialVideoPlayer'
import { MaterialAction } from '../../../actions'

class LiveMaterial extends Component {

  componentDidMount() {
    MaterialController.setPreviewCallback(this.controllerCallback)
  }
  controllerCallback = (obj) => {
    if (obj.type === Type.COMMON_TYPE.MATERIAL_LIVE_IMAGE) {
      this.handleMaterialShowImage(obj.task)
      obj.callback()
    } else if (obj.type === Type.COMMON_TYPE.MATERIAL_LIVE_SLIDE) {
      this.handleMaterialSlide(obj.task)
      obj.callback()
    } else if (obj.type === Type.COMMON_TYPE.MATERIAL_START_VIDEO) {
      this.handleMaterialVideo(obj.task, obj.callback)
    }
  }
  handleMaterialShowImage(task) {}
  handleMaterialSlide(task) {
    const { dispatch } = this.props
    const { changeIndex } = MaterialAction
    const index = parseInt(task.data.index)
    dispatch(changeIndex(index))
  }
  handleMaterialVideo(task, callback) {
    const { dispatch } = this.props
    const { toggleVideoMask } = MaterialAction
    dispatch(toggleVideoMask(true))
    MaterialPlayer.pause()
    MaterialController.stop()
    MaterialVideoPlayer.play(task.data.url, 0, () => {}, () => {
      dispatch(toggleVideoMask(false))
      callback && callback()
      MaterialPlayer.start()
      MaterialController.start()
    })
  }
  renderLoading() {
    const { loading } = this.props
    return loading ? (<div className="loading"><img className="loading_image" src={require('../../../images/indicator_verybig.gif')} alt=""/></div>)
      : null
  }
  renderVoiceStatus() {
    return (
      <div className="voice_status">
        {this.renderLiving()}
        {this.renderDownloading()}
        {this.renderPlaying()}
        {this.renderWaiting()}
      </div>
    )
  }
  render() {
    const { show, loading } = this.props
    return (
      <div className={show ? "material_screen" : "material_screen hide"}>
        {this.renderLoading()}
        <MaterialSwiper/>
        <MaterialVideo/>
      </div>
    )
  }
}
const mapState = (state) => {
  const { MaterialState } = state
  return {
    ...MaterialState
  }
}

export default connect(mapState)(LiveMaterial)
